<template>
  <div class="homePageCss">
    <MarsMap ref="marsMapRef" class="centerDiv-container" @onload="marsOnload" @getPoint="getPoint"
      @toolClick1="toolClick1" @coordinates-selected="handleCoordinatesSelected" />
    <div class="positionInformation">
      <div>海拔：{{ positionDes.alt }}米</div>
      <div>纬度: {{ positionDes.lat }}</div>
      <div>经度: {{ positionDes.lon }}</div>
    </div>
    <MyDialog title="航线自动规划" ref="myDialogRef" :modal="false" draggable :underlyingOperating="true" width="400px"
      :beforeClose="cancelBtn">
      <template v-slot:content>
        <div>
          <el-form ref="form" :model="formData" label-width="130px">
            <el-form-item label="航线间距">
              <el-input-number v-model="formData.spacing" :min="10" controls-position="right"
                @change="onSpacingChange" />
            </el-form-item>
            <el-form-item label="边线选择：">
              <div class="sidelineBox">
                <el-select v-model="formData.startingPoint" placeholder="请选择开始点" size="small" style="width: 60px"
                  @change="startingPointChange">
                  <el-option v-for="item in startingPointArr" :key="item.value" :label="item.name"
                    :value="item.value" />
                </el-select>
                <!-- <el-select v-model="formData.endPoint" placeholder="请选择结束点" disabled size="small" style="width: 60px">
                  <el-option v-for="item in endpointArr" :key="item.value" :label="item.name" :value="item.value" />
                </el-select> -->
                <el-checkbox class="checkboxCss" v-model="formData.direction" label="航线反转" size="large" />
              </div>
            </el-form-item>
            <el-form-item label="航线扩展距离（m）：">
              <el-input-number v-model="formData.routeExtensionDistance" :min="50" />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="beganToCalculate">开始计算</el-button>
              <el-button type="primary" @click="redrawn">重新绘制</el-button>
            </el-form-item>
          </el-form>
        </div>
      </template>
      <template v-slot:footer>
        <el-button type="primary" size="small" @click="confirmedBtn">确认</el-button>
        <el-button type="" size="small" @click="cancelBtn">取消</el-button>
      </template>
    </MyDialog>

    <MyDialog title="可视域分析" ref="myDialogRef2" :modal="false" draggable :underlyingOperating="true" width="300px"
      :beforeClose="viewshedAnalysisModalCancel">
      <template v-slot:content>
        <div>
          <el-form ref="form2" :model="formData2" label-width="90px">
            <el-form-item label="经度">
              <el-input-number placeholder="请输入经度" size="small" v-model="formData2.longitude" />
            </el-form-item>
            <el-form-item label="纬度">
              <el-input-number placeholder="请输入纬度" size="small" v-model="formData2.latitude" />
            </el-form-item>
            <el-form-item label="高度">
              <el-input-number placeholder="请输入高度(绝对高度)" v-model="formData2.height" />
              <span>米</span>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="positioning">定位</el-button>
              <el-button type="primary" @click="mapSelectedPoint">地图选点</el-button>
            </el-form-item>
            <el-form-item label="距离">
              <el-input-number placeholder="请输入距离" v-model="formData2.radius" :min="10"
                @keyup.enter="radiusPressEnter" />
              <span>米</span>
            </el-form-item>
            <el-form-item label="飞行高度">
              <el-input-number placeholder="请输入高度(绝对高度)" v-model="formData2.flyingHeight" :min="10" />
              <span>米</span>
            </el-form-item>
            <el-form-item label="切分数">
              <el-select v-model="formData2.cuttingFace" placeholder="请选择切分数" style="width: 120px">
                <el-option v-for="item in cuttingFaceOptions" :key="item.value" :label="item.label"
                  :value="item.value" />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="beganToCalculateFn">开始分析</el-button>
            </el-form-item>
          </el-form>
        </div>
      </template>
    </MyDialog>

  </div>
</template>

<script setup>
import * as mars3d from "mars3d"
import MarsMap from "@/components/marsWork/marsMap.vue"
import MyDialog from '@/components/comCustomModal/index.vue'
import { reactive } from "vue";


const positionDes = ref({
  lon: 0,
  lat: 0,
  alt: 0
})

const marsOnload = (map) => {
  map.on(mars3d.EventType.mouseMove, function (event) {
    // console.log('🚀 ~ event -->', event)
    const mpt = mars3d.LngLatPoint.fromCartesian(event.cartesian)
    positionDes.value = {
      lon: mpt.lng,
      lat: mpt.lat,
      alt: map.getCameraDistance() > 2500000 ? 0 : mpt.alt
    }
  })
}

// 航线自动规划
const marsMapRef = ref(null)
const polygonalCoordinates = ref([])
const myDialogRef = ref(null)
const formData = reactive({
  spacing: 30,
  direction: false,
  startingPoint: 0,
  endPoint: 1,
  routeExtensionDistance: 100,
});


const startingPointArr = ref([])
const endpointArr = ref([])

const getPoint = (val) => {
  // console.log('🚀 ~ val -->', val)
  polygonalCoordinates.value = val
  startingPointArr.value = []
  endpointArr.value = []
  let coordinates = []
  val.forEach(item => {
    coordinates.push([item.lat, item.lng])
  });
  for (const key in coordinates) {
    startingPointArr.value.push({
      name: Number(key) + 1,
      value: Number(key)
    })
    endpointArr.value.push({
      name: Number(key) + 1,
      value: Number(key)
    })
  }
  // console.log('🚀 ~  startingPointArr.value -->', startingPointArr.value)
  openMyDialog()
}

const startingPointChange = (val) => {
  // console.log('🚀 ~ val -->', val)
  if (Number(val) != startingPointArr.value.length - 1) {
    formData.startingPoint = val
    formData.endPoint = Number(val) + 1
  } else {
    formData.startingPoint = val
    formData.endPoint = 0
  }
}

const openMyDialog = () => {
  myDialogRef.value.open()
}
const confirmedBtn = () => {
  myDialogRef.value.close()
}

const beganToCalculate = () => {
  marsMapRef.value.removeGraphicLayerId('uavStartPosition')
  marsMapRef.value.removeGraphicLayerId('uavEndPosition')
  marsMapRef.value.removeGraphicLayerId('plannedRoutes')
  marsMapRef.value.removeGraphicLayerId('uavModel')
  marsMapRef.value.removeGraphicLayerId('graphicFrustum')
  marsMapRef.value.removeGraphicLayerName('divPoint2')

  marsMapRef.value.planRoutes(polygonalCoordinates.value, formData.spacing, formData.routeExtensionDistance, [formData.startingPoint, formData.endPoint], formData.direction)
  // marsMapRef.value.planRoutes(polygonalCoordinates.value, formData.spacing, [formData.startingPoint, formData.endPoint], formData.direction)
}

const redrawn = () => {
  marsMapRef.value.removeGraphicLayerName('drawClosedLineSegments')
  marsMapRef.value.removeGraphicLayerId('uavStartPosition')
  marsMapRef.value.removeGraphicLayerId('uavEndPosition')
  marsMapRef.value.removeGraphicLayerId('plannedRoutes')
  marsMapRef.value.removeGraphicLayerId('uavModel')
  marsMapRef.value.removeGraphicLayerId('graphicFrustum')
  marsMapRef.value.removeGraphicLayerName('divPoint1')
  marsMapRef.value.removeGraphicLayerName('divPoint2')

  marsMapRef.value.paintTool()
}

const cancelBtn = () => {
  marsMapRef.value.removeGraphicLayerName('drawClosedLineSegments')
  marsMapRef.value.removeGraphicLayerId('uavStartPosition')
  marsMapRef.value.removeGraphicLayerId('uavEndPosition')
  marsMapRef.value.removeGraphicLayerId('plannedRoutes')
  marsMapRef.value.removeGraphicLayerId('uavModel')
  marsMapRef.value.removeGraphicLayerId('graphicFrustum')
  marsMapRef.value.removeGraphicLayerName('divPoint1')
  marsMapRef.value.removeGraphicLayerName('divPoint2')

  myDialogRef.value.close()
}
const onSpacingChange = (value) => {
  formData.spacing = value;
};

// 可视域分析
const myDialogRef2 = ref(null)
const formData2 = reactive({
  longitude: 0,
  latitude: 0,
  height: 0,
  radius: 250,
  flyingHeight: 10,
  cuttingFace: 100,
})

const cuttingFaceOptions = [
  { label: "100", value: 100 },
  { label: "200", value: 200 },
  { label: "500", value: 500 },
  { label: "1000", value: 1000 },
  { label: "10000", value: 10000 },
]

const toolClick1 = (val) => {
  myDialogRef2.value.open()
}

const positioning = () => {
  const coordinatePoint = [formData2.longitude, formData2.latitude, formData2.height + formData2.flyingHeight]
  marsMapRef.value.positioning(coordinatePoint, formData2.radius)
}

const handleCoordinatesSelected = (coordinates) => {
  formData2.longitude = coordinates[0]
  formData2.latitude = coordinates[1]
  formData2.height = coordinates[2]
};
const mapSelectedPoint = async () => {
  marsMapRef.value.mapSelectionCoordinates1(formData2.radius)
}

const radiusPressEnter = () => {
  marsMapRef.value.redrawTheCircle(formData2.radius)
}

const beganToCalculateFn = () => {
  const coordinatePoint = [formData2.longitude, formData2.latitude, formData2.height + formData2.flyingHeight]
  marsMapRef.value.viewshedAnalysis(coordinatePoint, formData2.radius, formData2.cuttingFace)
}

const viewshedAnalysisModalCancel = () => {
  marsMapRef.value.removeGraphicLayer()
  myDialogRef2.value.close()
}

onMounted(() => {

});

onBeforeUnmount(() => {

})
</script>

<style lang="scss" scoped>
.homePageCss {
  // position: absolute;
  // z-index: 99;
  height: 100%;
  width: 100%;
}

.centerDiv-container {
  height: 100%;
  width: 100%;
  overflow: hidden;

  :focus-visible {
    outline: none;
  }
}

.positionInformation {
  position: absolute;
  top: 65px;
  left: 10px;
  color: #fff;
  font-size: 15px;
  z-index: 9;
}

.positionInformation>div {
  float: right;
  margin-right: 25px;
  color: #fff;
}

.sidelineBox {
  display: flex;
  align-items: center;
  justify-content: center;

  .checkboxCss {
    margin-left: 15px;
  }
}
</style>
